<template>
  <page-frame>
    <div class="positionManage">
      <div class="toptitle">
        <div class="left" style="padding-bottom:1px;">定位管理</div>
        <div class="right">
          <div class="btns"></div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-col :span="5">
                <label>会员姓名</label>
              </el-col>
             <el-col :span="17">
               <el-input v-model="memberName"></el-input>
             </el-col>
              <el-col :span="2">
                <el-button class="lightGreenBtn" @click="getMemberLocation">搜索</el-button>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-top:15px;">
          <el-col :span="10">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="memberInfo"
                label="会员信息"
                width="">
              </el-table-column>
              <el-table-column
                prop="address"
                label="当前位置"
                width="">
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作"
                width="120">
                <template scope="scope">
                  <el-button type="text" size="small" @click.stop="position(scope.row)">定位</el-button>
                  <el-button type="text" size="small">围栏</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangePage"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-col>
          <el-col :span="13" :offset="1">
            <BaiduMap
            :memberId="currentMemberId" @goto="father"></BaiduMap>
          </el-col>
        </el-row>
      </div>
    </div>
  </page-frame>
</template>

<script>
import BaiduMap from '../../components/map.vue';
import positionManageApi from '../../service/healthManagement/positionManageApi';
export default{
  data(){
    return{
      currentRow:null,
      currentMemberId:null,
      memberName:'',
      tableData:[{
        memberInfo:'张三/男/86岁',
        address:'上海市碧波路250号三号楼',
      }],
      total:1,
      currentPage: 1,
    }
  },
  components: {
    BaiduMap
  },
  methods: {
    init() {
      this.getMemberLocation();
    },
    father(val){
      this.currentRow.address = val.address;
    },
    getMemberLocation(){
      let self = this;
      positionManageApi.getMemberLocation(1,3,self.memberName).then(
        (res)=>{
          self.tableData = res.data.data.list;
          self.total = res.data.data.total;
          for(let i=0;i<self.tableData.length;i++){
            self.tableData[i].memberInfo = self.tableData[i].memberName
              +'/'+ self.tableData[i].sex
              +'/'+self.tableData[i].age+'岁';
          }
        }
      );
    },
    position(row){
      this.currentMemberId= row.deviceId;
      this.currentRow = row;
    },
    handleSizeChange(val) {},
    handleCurrentChangePage(val) {
      this.currentPage = val;
    },
  },
  mounted: function () {
    this.init();
  },
}
</script>

<style>

</style>
